import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export const useLazyData = (findNew) => {
  const target = ref(null) // 获取公共的标签或是组件 相当于是其一个ref通用的变量名
  // 定义数组来接收后台获取到的数据
  const list = ref([])
  // useIntersectionObserver(callback) {
  //   callback([{isIntersecting:true}])
  // }
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // 判断被监听的元素是否已经进入可视区
    if (isIntersecting) {
      findNew().then(ret => {
        list.value = ret.result
        // 如果获取到了数据，可以取消继续监听
        stop()
      })
    }
  })
  return { list, target }
}
